<template>
  <div class="workshoPonsump">
    <stitle :bg="bg" text="能耗消耗量" :type="0" />
    <!-- <div class="tablecon">
      <el-table :data="tableData" style="width: 100%" height="180px">
        <el-table-column prop="name" label="车间名" width="70px">
        </el-table-column>
        <el-table-column prop="kc" label="用水量" width="70px">
        </el-table-column>
        <el-table-column prop="pd" label="用电量" width="70px">
        </el-table-column>
        <el-table-column prop="ck" label="用气量" width="70px">
        </el-table-column>
        <el-table-column prop="peo" label="记录人员" width="80px">
        </el-table-column>
      </el-table>
    </div> -->
    <el-row>
      <el-col :span="12">
        <li>
          <el-row :gutter="20">
            <el-col :span="4">
              <img
                width="62px"
                height="61px"
                src="../../assets/images/modelimg/d1.png"
              />
            </el-col>
            <el-col :span="20" style="padding-left: 50px">
              <div style="margin-top: 10px">
                <span style="color: #1EECFF; font-size: 17px">130.05</span
                ><span style="color: #fff; margin-left: 15px">亿kw</span>
              </div>
              <span style="color: #fff; font-size: 17px; margin-top: 5px"
                >用电量</span
              >
            </el-col>
          </el-row>
        </li>
      </el-col>
      <el-col :span="12">
        <li>
          <el-row :gutter="20">
            <el-col :span="4">
              <img
                width="62px"
                height="61px"
                src="../../assets/images/modelimg/y.png"
              />
            </el-col>
            <el-col :span="20" style="padding-left: 50px">
              <div style="margin-top: 10px">
                <span style="color: #1EECFF; font-size: 17px">130.05</span
                ><span style="color: #fff; margin-left: 15px">亿吨</span>
              </div>
              <span style="color: #fff; font-size: 17px; margin-top: 5px"
                >用电量</span
              >
            </el-col>
          </el-row>
        </li>
      </el-col>
    </el-row>
    <el-row style="margin-top:15px;margin-bottom:10px">
      <el-col :span="12">
        <li>
          <el-row :gutter="20">
            <el-col :span="4">
              <img
                width="62px"
                height="61px"
                src="../../assets/images/modelimg/d1.png"
              />
            </el-col>
            <el-col :span="20" style="padding-left: 50px">
              <div style="margin-top: 10px">
                <span style="color: #1EECFF; font-size: 17px">130.05</span
                ><span style="color: #fff; margin-left: 15px">亿m³</span>
              </div>
              <span style="color: #fff; font-size: 17px; margin-top: 5px"
                >天然气使用量</span
              >
            </el-col>
          </el-row>
        </li>
      </el-col>
      <el-col :span="12">
        <li>
          <el-row :gutter="20">
            <el-col :span="4">
              <img
                width="62px"
                height="61px"
                src="../../assets/images/modelimg/y1.png"
              />
            </el-col>
            <el-col :span="20" style="padding-left: 50px">
              <div style="margin-top: 10px">
                <span style="color: #1EECFF; font-size: 17px">70.05</span
                ><span style="color: #fff; margin-left: 15px">亿m³</span>
              </div>
              <span style="color: #fff; font-size: 17px; margin-top: 5px"
                >用水量</span
              >
            </el-col>
          </el-row>
        </li>
      </el-col>
    </el-row>
    <stitle :bg="bg" text="能耗消耗趋势对比" :type="0" />
    <div id="echartWorkshop"></div>
  </div>
</template>

<script>
import stitle from "@/components/common/stitle";
export default {
  name: "workshoPonsump",
  components: {
    stitle,
  },
  data() {
    return {
      bg: require("@/assets/images/DispatchCommand/stitle.png"),
      tableData: [
        {
          name: "车间1 ",
          kc: "89",
          pd: "89",
          ck: "89",
          peo: "李明",
        },
        {
          name: "车间1 ",
          kc: "89",
          pd: "89",
          ck: "89",
          peo: "李明",
        },
        {
          name: "车间1 ",
          kc: "89",
          pd: "89",
          ck: "89",
          peo: "李明",
        },
        {
          name: "车间1 ",
          kc: "89",
          pd: "89",
          ck: "89",
          peo: "李明",
        },
        {
          name: "车间1 ",
          kc: "89",
          pd: "89",
          ck: "89",
          peo: "李明",
        },
        {
          name: "车间1 ",
          kc: "89",
          pd: "89",
          ck: "89",
          peo: "李明",
        },
      ],
      edata: [
        { value: 40, name: "车间一" },
        { value: 18, name: "车间二" },
        { value: 22, name: "车间三" },
      ],
    };
  },
  methods: {
    setEchart() {
      const _echarts = this.$echarts.init(
        document.getElementById("echartWorkshop")
      );
      const option = {
        grid: {
          bottom: "15%",
          right: "10%",
          top: "15%",
        },
        tooltip: {
          trigger: "axis",
          textStyle: {
            fontSize: 14,
            heigth: 50,
            width: 50,
          },
        },
        xAxis: {
          type: "category",
          data: [
            "2014",
            "2015",
            "2016",
            "2017",
            "2018",
            "2019",
            "2020",
            "2021",
            "2022",
          ],
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          axisLabel: {
            textStyle: {
              color: "#fff",
              fontSize: 12,
            },
          },
        },
        yAxis: {
          type: "value",
          name: "单位(亿兆瓦)",
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#fff",
              fontSize: 12,
            },
          },
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#305383"],
              width: 1,
              type: "solid",
            },
          },
        },
        series: [
          {
            data: [38, 41, 25, 33, 31, 59, 69, 50, 56, 27, 54],
            type: "line",
            itemStyle: {
              color: "#00FFFF",
            },
            lineStyle: {
              color: "#00FFFF",
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0, 255, 255, 1)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 255, 255, 0)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
            smooth: true,
          },
        ],
      };
      _echarts.setOption(option);
    },
    // setEchart() {
    //   const _echarts = this.$echarts.init(
    //     document.getElementById("echartWorkshop")
    //   );
    //   const option = {
    //     tooltip: {
    //       trigger: "item",
    //     },
    //     title: [
    //       {
    //         text: "用水量",
    //         left: "left",
    //         top: 20,
    //         textStyle: {
    //           color: "#82CC82",
    //           fontSize: 14,
    //           fontFamily: "ZZGFLQ",
    //           fontStyle: "oblique",
    //         },
    //       },
    //       {
    //         text: "用电量",
    //         left: 200,
    //         top: 20,
    //         textStyle: {
    //           color: "#EFC96E",
    //           fontSize: 14,
    //           fontFamily: "ZZGFLQ",
    //           fontStyle: "oblique",
    //         },
    //       },
    //       {
    //         text: "用气量",
    //         left: "left",
    //         top: 180,
    //         textStyle: {
    //           color: "#57C1F2",
    //           fontSize: 14,
    //           fontFamily: "ZZGFLQ",
    //           fontStyle: "oblique",
    //         },
    //       },
    //     ],
    //     legend: {
    //       itemWidth: 15,
    //       itemHeight: 10,
    //       bottom: "0px",
    //       textStyle: {
    //         fontSize: 12,
    //         color: "#fff",
    //       },
    //     },
    //     color: ["#EFC96E", "#57C1F2", "#82CC82"],
    //     series: [
    //       {
    //         type: "pie",
    //         radius: [0, 45],
    //         center: ["28%", "25%"],
    //         itemStyle: {
    //           normal: {
    //             labelLine: {
    //               length: 1,
    //             },
    //           },
    //         },
    //         label: {
    //           show: true,
    //           position: "center",
    //           normal: {
    //             formatter: function (params) {
    //               let res = `{a| ${params.percent}%}`;
    //               return res;
    //             },
    //             rich: {
    //               a: {
    //                 color: "#fff",
    //                 fontSize: 12,
    //               },
    //             },
    //           },
    //         },
    //         data: this.edata,
    //       },
    //       {
    //         type: "pie",
    //         radius: [35, 45],
    //         center: ["70%", "25%"],
    //         itemStyle: {
    //           normal: {
    //             labelLine: {
    //               length: 1,
    //             },
    //           },
    //         },
    //         label: {
    //           show: true,
    //           position: "center",
    //           normal: {
    //             formatter: function (params) {
    //               let res = `{a| ${params.percent}%}`;
    //               return res;
    //             },
    //             rich: {
    //               a: {
    //                 color: "#fff",
    //                 fontSize: 12,
    //               },
    //             },
    //           },
    //         },
    //         data: this.edata,
    //       },
    //       {
    //         type: "pie",
    //         radius: [25, 55],
    //         roseType: "area",
    //         center: ["45%", "65%"],
    //         label: {
    //           show: true,
    //           position: "center",
    //           normal: {
    //             formatter: function (params) {
    //               let res = `{a| ${params.percent}%}`;
    //               return res;
    //             },
    //             rich: {
    //               a: {
    //                 color: "#fff",
    //                 fontSize: 12,
    //               },
    //             },
    //           },
    //         },
    //         data: this.edata,
    //       },
    //     ],
    //   };
    //   _echarts.setOption(option);
    // },
  },
  mounted() {
    this.setEchart();
  },
  computed: {},
};
</script>

<style lang="scss"  scoped>
.workshoPonsump {
  width: 100%;
  padding-left: 60px;
  box-sizing: border-box;
  #echartWorkshop {
    width: 100%;
    height: 400px;
  }
}
</style>